<template>
    <div class="bg memberDiscount">
        <div class="header">
            <router-link to="/my-add" class="header-btnLeft"  ><img src="../assets/back-btn.png"></router-link>
            <h1 class="header-title">会员折扣</h1>
            <div class="header-btnRight"></div>
        </div>
        <div class="h30"></div>
        <div class="popup-wrap">
            <div class="popup-wrap-title">
                会员等级
            </div>
            <div class="popup-wrap-tips">
                <ul>
                    <li>1.普通会员</li>
                    <li>2.白银会员</li>
                    <li>3.黄金会员</li>
                    <li>4.铂金会员</li>
                    <li>5.钻石会员</li>
                </ul>
            </div>
            <div class="popup-wrap-title">
                玩法规则
            </div>
            <div class="popup-wrap-tips">
                <ul>
                    <li>1.如何下单</li>
                    <li>选择“目的地”找到对应的产品，支付下单，即享会员折扣价，更可在服务号快帮行（kwibon）“我要预订”选择其他接送机、包车服务，专享会员价。</li>
                    <li>2.如何升级</li>
                    <li>在“我的”→“会员中心”点击底部菜单“申请成为更高级会员”，提交申请2个工作日内由审核专员确认是否升级。</li>
                </ul>
            </div>
            <div class="popup-wrap-title">
                查看收益&提现
            </div>
            <div class="popup-wrap-tips">
                <ul>
                    <li>1.进入“我的”→“个人中心”查看收益情况。</li>
                    <li>2.点击“我的收益”，完善账户信息后，即可申请提现。</li>
                    <li>注：满￥100元即可申请提现，提现到账周期7个工作日内。</li>
                </ul>
            </div>
        </div>

        <div class="rebateInfo" v-if="member_info.member_type && member_info.member_type.discoun_per && member_info.member_type.discoun_per.length>0">
            <div class="rebateInfo-title">
                会员专享  折扣比例
            </div>
            <div class="rebateInfo-list">
                <div class="rebateInfo-list-item" v-for="item in member_info.member_type.discoun_per">
                    <div class="rebateInfo-list-item-title">{{item.name}}</div>
                    <div class="rebateInfo-list-item-desc">
                        {{parseFloat(item.per)*10 == 10 ? "无折扣" : parseFloat(item.per*10).toFixed(1) +'折'}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {Toast} from "mint-ui"
    import storage from "../store/localstorage"
    import config from "../store/config"
    import wxShare from "../store/wxShare"
    export default {
        name: "My-add",
        data() {
            return {
                url:config.url,
                member_info: [], //0未申请 1 已申请 2 申请通过
                user_info: [],
            }
        },
        methods: {
            getData() {
                this.axios.post('wap/member/isapply', {})
                    .then(res => {
                        this.member_info = res.data
                        this.share()
                    })
                    .catch(err => console.log(err))
            },
            share() {
                wxShare({title: '会员折扣', debug: false}, function () {
                    console.log('分享成功')
                });
            }

        },
        mounted() {
            window.scrollTo(0,0);
            this.user_info = storage.get('userinfo')
            this.getData()
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";

    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(200);
        background: $bgcolor1;
    }

    .bg {
        background: $bgcolor1;
        height: 100%;
    }

    .header {
        display: flex;
        align-items: center;
        padding: rpx(30);
        justify-content: space-between;
        background: $color0;
        &-btnLeft {
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);
            img {
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-btnRight:after {
            display: block;
            content: ' ';
            width: rpx(64);
            height: rpx(64);
        }
        &-title {
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }
    }


    .rebateInfo {
        background: #F5F5F5;
        margin-bottom: rpx(60);
        &-title {
            padding: rpx(60) rpx(30) 0;
            font-size: rpx(40);
            text-align: center;
            color: #ff7d00;
        }
        &-list {
            box-sizing: border-box;
            padding: rpx(20);
            display: flex;
            flex-wrap: wrap;
            &-item {
                width: 22.19%;
                border-radius: rpx(10);
                margin: rpx(10);
                padding: 0 rpx(10);
                background: $color0;
                text-align: center;
                -moz-box-shadow:2px 2px 5px #969696;/*firefox*/ 
                -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/ 
                box-shadow:2px 2px 5px #969696;/*opera或ie9*/
                &-title {
                    padding: rpx(20) 0 rpx(20);
                    font-size: rpx(28);
                }
                &-desc {
                    font-size: rpx(26);
                    color: $color5;
                    text-align: center;
                    padding-bottom: rpx(10);
                    line-height: 130%;
                }
            }
        }
    }
    .memberDiscount .popup-wrap{
        background: #fff;
        padding: rpx(20) rpx(20) rpx(40) rpx(20);
        &-title {
            font-size: rpx(34);
            font-weight: bold;
            padding: rpx(20) 0;
        }
        &-tips {
            padding: rpx(10);
            li {
                font-size: rpx(28);
                color: #999;
                padding: rpx(5) 0;
                line-height: rpx(40);
            }
        }
    }
</style>